<script lang="ts" setup>
import type { VxeGridProps } from 'vxe-table';

import type { AccountApi } from '#/api/core/account'; // 根据实际路径调整

import { reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';

import { Button, Card, Input } from "ant-design-vue";

import { searchByPage } from '#/api/core/account'; // 根据实际路径调整
import { createPageParams } from '#/api/core/Common'; // 根据实际路径调整
import { renderFilterHeader } from '#/utils/grid-filter';

interface RowVO extends AccountApi.UserInfo {
  // 如果需要扩展，可以在这里添加
}

// 定义响应式数据
const filterData = reactive<Record<string, any>>({});
const sortData = reactive<Record<string, any>>({});
const tableData = ref<RowVO[]>([]);
const loading = ref(false); // 加载状态
// 分页参数
const pagination = reactive({
  current: 1,
  size: 50,
  totalRow: 0,
});

// const params = createPageParams(pagination, filterData, sortData);

// 获取表格数据
const fetchTableData = async () => {
  loading.value = true;
  try {
    // 每次请求前动态创建最新的参数
    console.warn('filterData', filterData);
    const currentParams = createPageParams({
      current: pagination.current,
      size: pagination.size,
      filterData,
      sortData,
    });
    const res = await searchByPage(currentParams);
    tableData.value = res.data.list;
    pagination.totalRow = res.data.totalRow;
  } catch (error) {
    console.error('获取数据失败', error);
  } finally {
    loading.value = false;
  }
};

// 搜索处理函数
const handleSearch = () => {
  pagination.current = 1; // 重置到第一页
  fetchTableData();
};

// 初始化数据
fetchTableData();

const gridOptions: VxeGridProps<RowVO> = {
  border: true,
  size: 'mini',
  columns: [
    {
      field: 'id',
      title: 'ID',
      width: 50,
      slots: {
        header: ({ column }) =>
          renderFilterHeader(
            { column },
            {
              filterData, // 响应式数据脱敏
              sortData,
              url: '/admin/account/searchByHeard',
              onFilterChange: handleSearch,
            },
          ),
      },
    },
    {
      field: 'realname',
      title: '昵称',
      width: 250,
      slots: {
        header: ({ column }) =>
          renderFilterHeader(
            { column },
            {
              filterData, // 响应式数据脱敏
              sortData,
              url: '/admin/account/searchByHeard',
              onFilterChange: handleSearch,
            },
          ),
      },
    },
    {
      field: 'username',
      title: '用户名',
      width: 250,
      slots: {
        header: ({ column }) =>
          renderFilterHeader(
            { column },
            {
              filterData, // 响应式数据脱敏
              sortData,
              url: '/admin/account/searchByHeard',
              onFilterChange: handleSearch,
            },
          ),
      },
    },
    {
      field: 'is_active_str',
      title: '状态',
      width: 150,
      slots: {
        header: ({ column }) =>
          renderFilterHeader(
            { column },
            {
              filterData, // 响应式数据脱敏
              sortData,
              url: '/admin/account/searchByHeard',
              onFilterChange: handleSearch,
            },
          ),
      },
    },
  ],
};
</script>

<template>
  <Page>
    <Card title="基本使用">
      <vxe-grid :data="tableData" resizable v-bind="gridOptions" />
    </Card>
  </Page>
</template>
